<template>
	<view class="container">
		<view class="top flex-between">
			<view class="user">
				<image class="avatar" :src="userInfo.headImg"></image>
				{{userInfo.username}}
			</view>
			<view class="set" @click="toPath">账号设置</view>
		</view>
		<view class="cen flex-around">
			<view class="li tc" v-for="(item, index) in label" :key="index" @click="toDetail(index)">
				<image :src="item.url" mode=""></image>
				<view>{{item.label}}</view>
			</view>
		</view>
		<view class="bom">
			<button v-if="!userInfo.wechatName" class="share" open-type="getUserInfo" @click="wxLogin">
				<view class="li flex-between">
					<text>绑定微信账号</text>
					<image src="../../static/my/go_btn2.png"></image>
				</view>
			</button>
			<view class="li flex-between" @click="toPath('push')">
				<text>业绩推送设置</text>
				<image src="../../static/my/go_btn2.png"></image>
			</view>
			<button class="share" open-type="share">
				<view class="li flex-between" style="border-bottom: 1px solid #F2F2F2;">
					<text>分享悟空淘助手</text>
					<image src="../../static/my/go_btn2.png"></image>
				</view>
			</button>
			<view class="li flex-between" @click="qrShow = true">
				<text>联系客服</text>
				<image src="../../static/my/go_btn2.png"></image>
			</view>
		</view>
		<!-- 扫码客服弹窗 -->
		<van-dialog class="custom-dialog" use-slot title="联系客服" :show="qrShow" :showConfirmButton="false" closeOnClickOverlay
		 @close="qrShow = false">
			<view class="vip-container">
				<view class="vip-tip">添加客服获取VIP专属服务</view>
				<image src="../../static/my/weixin_logo.png" mode=""></image>
				<view class="vip-send">回复数字“2”，或者点击发送小程序卡片</view>
				<button class="vip-btn" open-type="contact" :show-message-card="true" send-message-title="添加客服" send-message-img="https://taoke.daihuo.com/invitationCode.png" @click="qrShow = false">确定</button>
			</view>
		</van-dialog>
	</view>
</template>

<script>
	import {
		tip
	} from '@/utils/tip'
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				label: [{
						url: '../../static/my/union.png',
						label: '联盟管理'
					},
					{
						url: '../../static/my/extension.png',
						label: '推广位管理'
					},
					{
						url: '../../static/my/channel.png',
						label: '渠道管理'
					}
				],
				qrShow: false
			};
		},
		onLoad() {},
		onShow() {},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '悟空淘助手：全网首款淘客订单管理系统',
				path: '/pages/index/index',
				imageUrl: 'https://taoke.daihuo.com/taoke.png'
			}
		},
		computed: {
			...mapState(['userInfo', 'permmenu'])
		},
		methods: {
			validPer(id) {
				console.log(this.permmenu)
				this.permmenu.forEach((item, index) => {
					console.log(1)
					if (item.id === id) {
						return true
					}
				})
				console.log('arr', arr)
			},
			toPath(val) {
				if (val === 'push') {
					uni.navigateTo({
						url: '/pagesC/my/push'
					})
				} else {
					uni.navigateTo({
						url: '/pagesC/my/setting/index'
					})
				}
			},
			toDetail(index) {
				let id = ''
				switch (index) {
					case 0:
						id = 88
						break;
					case 1:
						id = 94
						break;
					case 2:
						id = 258
						break;
				}
				for (let i = 0; i < this.permmenu.length; i++) {
					if (this.permmenu[i].id == id) {
						switch (index) {
							case 0:
								uni.navigateTo({
									url: '/pagesC/my/taobao'
								})
								break;
							case 1:
								uni.navigateTo({
									url: '/pagesC/my/position'
								})
								break;
							case 2:
								uni.navigateTo({
									url: '/pagesC/my/channel'
								})
								break;
						}
						return
					}
				}
				tip({
					title: '暂无权限进入'
				})
			},
			getUserInfo(e) {
				let that = this
				let params = {
					encryptedData: e.detail.encryptedData,
					iv: e.detail.iv
				}
				// #ifdef MP-WEIXIN
				wx.login({
					success(res) {
						if (res.code) {
							params.code = res.code
							that.$service.common.bindWechat(
								params
							).then(async (res) => {
								that.$store.dispatch('getUserInfo')
								that.$store.dispatch('getUserPerm')
							}).catch((err) => {
								tip({title: err})
							})
						}
					}
				})
				// #endif
			},
			wxLogin() {
				let data = {};
				let that = this;
				uni.login({
					provider: 'weixin',
					success(res) {
						data.code = res.code;
						const accountInfo = uni.getAccountInfoSync();
						data.appid = accountInfo.miniProgram.appId;
			
						uni.getUserInfo({
							provider: 'weixin',
							success(res) {
								data.iv = res.iv;
								data.encryptedData = res.encryptedData;
								that.$service.common.bindWechat(
									data
								).then(async (res) => {
									that.$store.dispatch('getUserInfo')
									that.$store.dispatch('getUserPerm')
								}).catch((err) => {
									tip({title: err})
								})
							},
							fail: function(err) {}
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.top {
			height: 210rpx;
			background-color: $main-color;
			padding: 0 24rpx;
			margin-bottom: 180rpx;

			.user {
				color: white;
				font-size: 28rpx;
				image {
					vertical-align: middle;
					width: 96rpx;
					height: 96rpx;
					border-radius: 50%;
					border: 8rpx solid white;
					margin-right: 22rpx;
				}
			}

			.set {
				width: 144rpx;
				height: 48rpx;
				border-radius: 48rpx;
				border: 2rpx solid white;
				line-height: 48rpx;
				text-align: center;
				color: white;
			}
		}

		.cen {
			align-items: center;
			background-color: white;
			width: 702rpx;
			height: 196rpx;
			border-radius: 8rpx;
			position: fixed;
			left: 0;
			right: 0;
			margin: 0 auto;
			top: 175rpx;

			image {
				width: 84rpx;
				height: 84rpx;
				margin-bottom: 4rpx;
			}

			.li {
				view {
					font-size: 28rpx;
					color: #999999;
				}
			}
		}

		.bom {
			width: 702rpx;
			background-color: white;
			border-radius: 8rpx;
			padding: 0 24rpx;
			margin: 0 auto;

			.li {
				height: 96rpx;
				border-bottom: 2rpx solid #F2F2F2;
				font-size: 28rpx;
				image {
					width: 24rpx;
					height: 24rpx;
				}
			}

			.share {
				background-color: white;
				border: none;
				width: 100%;
				padding: 0;
				outline: none;
			}

			.share::after {
				border: none;
			}
		}

		.bom .li:last-child {
			border: none;
		}

		/deep/ .custom-dialog {
			.van-dialog__header {
				padding-top: 28rpx;
			}

			text-align: center;

			image {
				width: 170rpx;
				height: 138rpx;
			}

			.vip-container {
				padding-bottom: 50rpx;
			}

			.vip-tip {
				color: #666666;
				margin: 20rpx 0;
			}

			.vip-send {
				color: #0C5DFF;
				margin-top: 20rpx;
				margin-bottom: 60rpx;
			}

			.vip-btn {
				width: 342rpx;
				height: 72rpx;
				background-color: #0C5DFF;
				border-radius: 42rpx;
				line-height: 72rpx;
				text-align: center;
				color: white;
				margin: 0 auto;
				font-size: 28rpx;
			}
		}
	}
</style>
